<template>
    <van-nav-bar title="每日推荐" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft"
        @click-right="onClickRight" />
    <van-row :gutter="[20, 20]">
        <van-col span="12" v-for="item in musicMany" :key="item.id" @click="toMusicMany(item.id)">
            <img :src="item.musicImg" alt="" width="100%" height="180px">
            <div class="text">{{ item.auth }}</div>
        </van-col>
    </van-row>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router';

const onClickLeft = () => history.back();
const onClickRight = () => showToast('按钮');

//查看更多数据
const musicMany = ref([
    { id: 1, musicImg: 'https://img1.baidu.com/it/u=2784017017,961885214&fm=253&fmt=auto&app=120&f=JPEG?w=418&h=524', auth: '一键开启好心情' },
    { id: 2, musicImg: 'https://img0.baidu.com/it/u=4109931953,1006256245&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', auth: '为你打造专属华语热歌' },
    { id: 3, musicImg: 'https://img2.baidu.com/it/u=3715324866,1551068885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1565', auth: 'DJ劲爆嗨曲' },
    { id: 4, musicImg: 'http://t13.baidu.com/it/u=172609151,647865823&fm=224&app=112&f=JPEG?w=500&h=500', auth: '五月天' }
])

// 更多歌单
const toMusicMany = (id) => {
    console.log('点击更多歌单', +id);
}

</script>
<style scoped>

.text {
    text-align: center;
    font-size: 15px;
}
</style>